<template>
  <div>
    <el-container>
      <el-header style="height : 10%">
            <el-image
             style="float:left;width: 20%; height: 10%"
              :src="url"
              />
            <div style="margin-top: 2%;margin-right:5%">
              <el-button type="primary" plain>首页</el-button>
              <el-input v-model="input" size="medium" style="width:30%" placeholder="请输入内容" suffix-icon="el-icon-search" />
              <el-button type="primary" plain>馆藏检索</el-button>
              <el-button type="success" plain>登录</el-button>
            </div>
        
        
      </el-header>
      <el-main>
        <div style="margin-top:0%">
          <el-image
            style="width:100%"
            :src="imgurl"
          />
        </div>
        <div style="background-color:white;margin-left:15%;margin-right:15%;">
          <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>公告通知</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div >
            <div >
              <h1>{{acticleName}}</h1>
            </div>
            <span>来源：管理员  作者：{{author}} 时间：{{acticleDate}}</span>
            <el-divider />
            <div v-html="content">{{content}}</div>
          </div>
        </div>
        <div style="background-color:white; height:65px; padding:15px">
          <el-tag style="margin-right:10px;height:35px">相关网站</el-tag>
          <el-dropdown>
            <el-button type="primary" style="height:35px">
              文化和旅游部直属单位<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item> <el-link :underline="false" href="https://www.dpm.org.cn/Home.html" target="_blank">故宫博物院</el-link> </el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.ccmg.cn/" target="_blank">中华文化传媒集团</el-link></el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.zgysyjy.org.cn/" target="_blank">中国艺术研究院</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="primary" style="height:35px">
              省级公共图书馆<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item> <el-link :underline="false" href="http://www.gll-gx.org.cn/" target="_blank">桂林图书馆</el-link> </el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.qhlib.org/" target="_blank">青海省图书馆</el-link></el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://www.ucdrs.net/area/sxlib" target="_blank">陕西省图书馆</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="primary" style="height:35px">
              其他<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item> <el-link :underline="false" href="http://www.shanxi.gov.cn/" target="_blank">山西省人民政府</el-link> </el-dropdown-item>
              <el-dropdown-item><el-link :underline="false" href="http://wlt.shanxi.gov.cn/" target="_blank">山西省文化和旅游厅</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import IN from '@/api/index.js'
export default {
  components: {},
  data() {
    return {
      acticleName: "",
      author: "",
      acticleDate: "",
      content: "",
      fits: [''],
      input: '',
      url: require('../../assets/1.png'),
      imgurl: require('../../assets/2.jpg'),
    };
  },
  created() {
    if (this.$route.query.acticleType == 'donation') {
      const noticeId = this.$route.query.noticeId
      var queryParam = {
        noticeId: noticeId
      }
      IN.getNoticeMsg(queryParam).then(res => {
        console.log("陈宇荷的第二类方法", res)
        var noticeObj = res.data.resultBody
        this.acticleName = noticeObj.noticeName
        this.author = noticeObj.author
        this.acticleDate = noticeObj.createDate
        this.content = noticeObj.noticeText
      })
    }

    if (this.$route.query.acticleType == 'dynamic') {
      const noticeId = this.$route.query.noticeId
      var queryParam = {
        noticeId: noticeId
      }
      IN.getNoticeMsg(queryParam).then(res => {
        console.log("陈宇荷的第二类方法", res)
        var noticeObj = res.data.resultBody
        this.acticleName = noticeObj.noticeName
        this.author = noticeObj.author
        this.acticleDate = noticeObj.createDate
        this.content = noticeObj.noticeText
      })
    }

    if (this.$route.query.acticleType == 'notice') {
      const noticeId = this.$route.query.noticeId
      var queryParam = {
        noticeId: noticeId
      }
      IN.getNoticeMsg(queryParam).then(res => {
        console.log("陈宇荷的第二类方法", res)
        var noticeObj = res.data.resultBody
        this.acticleName = noticeObj.noticeName
        this.author = noticeObj.author
        this.acticleDate = noticeObj.createDate
        this.content = noticeObj.noticeText
      })
    } else if (this.$route.query.acticleType == 'lecture') {
      const eventId = this.$route.query.eventId
      var queryParam = {
        eventId: eventId
      }
      IN.getEventMsg(queryParam).then(res => {
        console.log("陈宇荷的第二类方法", res)
        var eventObj = res.data.resultBody
        this.acticleName = eventObj.eventName
        this.author = eventObj.author
        this.acticleDate = eventObj.createDate
        this.content = eventObj.eventContent
      })
    }

    if (this.$route.query.acticleType == 'show') {
      const eventId = this.$route.query.eventId
      var queryParam = {
        eventId: eventId
      }
      IN.getEventMsg(queryParam).then(res => {
        console.log("陈宇荷的第二类方法", res)
        var eventObj = res.data.resultBody
        this.acticleName = eventObj.eventName
        this.author = eventObj.author
        this.acticleDate = eventObj.createDate
        this.content = eventObj.eventContent
      })
    }

    if (this.$route.query.acticleType == 'activity') {
      const eventId = this.$route.query.eventId
      var queryParam = {
        eventId: eventId
      }
      IN.getEventMsg(queryParam).then(res => {
        console.log("陈宇荷的第二类方法", res)
        var eventObj = res.data.resultBody
        this.acticleName = eventObj.eventName
        this.author = eventObj.author
        this.acticleDate = eventObj.createDate
        this.content = eventObj.eventContent
      })
    }

    if (this.$route.query.acticleType == 'guide') {
      const guideId = this.$route.query.guideId
      var queryParam = {
        guideId: guideId
      }
      IN.getGuideMsg(queryParam).then(res => {
        console.log("陈宇荷的第二类方法", res)
        var guideObj = res.data.resultBody
        this.acticleName = guideObj.guideName
        this.author = guideObj.author
        this.acticleDate = guideObj.createDate
        this.content = guideObj.guideContent
      })
    }


  },
  computed: {},
  methods: {
    handleClick() {
      alert('button click');
    }
  }
}
</script>
<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: right;
  line-height: 80px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  padding: 0%;

  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
